<template>
  <div class="box">
      <div class="b-left">
          <!-- <div class="column" >
              全部分类
          </div> -->
          <div @click="()=>onclick(index)" class="column thumb" v-for="(item,index) in Column" :class="index == Index ? 'active':''">
              {{ item }}
          </div>
      </div>
      <div class="b-right">
          <div class="nav">
              <div v-for="item in Nav" class="tag thumb">
                  {{ item }}
              </div>
          </div>
          <div class="shop">
              <div class="s-div thumb" v-for="item in Shop">
                  <div class="d-top"><img v-lazy="item.img" alt=""></div>
                  <div class="d-title">{{ item.title }}</div>
                  <div class="d-number">
                      <div class="d-price">￥  <p>{{ item.price }}</p></div>
                      <div class="d-num">成交{{item.num}}件 </div>
                  </div>
                  <div class="d-company">{{ item.company }}</div>
              </div>
          </div>
      </div>
  </div>
</template>

<script setup lang="ts" name="">
  import { publicUrl } from "@/utils/util";
  import { ref } from "vue"

  interface Shop {
      img:string,
      title:string,
      price:string,
      num:number,
      company:string
  }
  const Shop = ref<Array<any>>(
      [{img:publicUrl('/images/Special1.png'),title:"夏季MTM112312312定制男衬衫短袖",price:"59.90",num:99,company:"云彩定制服装有限公司"},
      {img:publicUrl('/images/Special2.png'),title:"夏季MTM定制男衬衫短袖",price:"59.90",num:99,company:"云彩定制服装有限公司"},
      {img:publicUrl('/images/Special3.png'),title:"夏季MTM定制男衬衫短袖",price:"59.90",num:99,company:"云彩定制服装有限公司"},
      {img:publicUrl('/images/Special4.png'),title:"夏季MTM定制男衬衫短袖",price:"59.90",num:99,company:"云彩定制服装有限公司"},
      {img:publicUrl('/images/Special5.png'),title:"夏季MTM定制男衬衫短袖",price:"59.90",num:99,company:"云彩定制服装有限公司"},
      {img:publicUrl('/images/Special6.png'),title:"夏季MTM定制男衬衫短袖",price:"59.90",num:99,company:"云彩定制服装有限公司"},
      {img:publicUrl('/images/Special1.png'),title:"夏季MTM定制男衬衫短袖",price:"59.90",num:99,company:"云彩定制服装有限公司"},
      {img:publicUrl('/images/Special2.png'),title:"夏季MTM定制男衬衫短袖",price:"59.90",num:99,company:"云彩定制服装有限公司"},
      {img:publicUrl('/images/Special3.png'),title:"夏季MTM定制男衬衫短袖",price:"59.90",num:99,company:"云彩定制服装有限公司"},
      {img:publicUrl('/images/Special4.png'),title:"夏季MTM定制男衬衫短袖",price:"59.90",num:99,company:"云彩定制服装有限公司"},
      {img:publicUrl('/images/Special5.png'),title:"夏季MTM定制男衬衫短袖",price:"59.90",num:99,company:"云彩定制服装有限公司"},
      {img:publicUrl('/images/Special6.png'),title:"夏季MTM定制男衬衫短袖",price:"59.90",num:99,company:"云彩定制服装有限公司"},
      {img:publicUrl('/images/Special1.png'),title:"夏季MTM定制男衬衫短袖",price:"59.90",num:99,company:"云彩定制服装有限公司"},
      {img:publicUrl('/images/Special2.png'),title:"夏季MTM定制男衬衫短袖",price:"59.90",num:99,company:"云彩定制服装有限公司"},    
      {img:publicUrl('/images/Special2.png'),title:"夏季MTM定制男衬衫短袖",price:"59.90",num:99,company:"云彩定制服装有限公司"}]
  )

  interface Nav{
      title:string
  }
  const Nav = ref<Array<any>>(
      ['短袖',"长裤",'短裤','长袖']
  )

  interface Column{
      title:string
  }
  const Column = ref<Array<any>>(
      ['全部分类','一级分类','二级分类','三级分类']
  )
  const Index = ref(0)
  const onclick = (index:number)=>{
      Index.value =  index
  }
</script>

<style scoped lang="scss">
  @media screen and (min-width: $pc-min-width) {
      @import "./index.scss";
  }
</style>